let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
let UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
	mode: 'development', //production会压缩js，development不压缩
	entry: './src/index.js',
	output: {
		filename: 'main.[hash:10].js',//打包后的js保留10位的hash值
		path: path.resolve(__dirname, 'dist'),
		publicPath: './'
	},
	devServer: {
		progress: true,
		contentBase: './dist',
		open: true,
		compress: true,
		hot: true
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',//使用的HTML模板
			filename: 'index.html',//打包生成后的文件名称
			minify: {
				removeAttributequotes: true,
				collapseWhitespace: true
			},
			hash: true
		}),
		new MiniCssExtractPlugin({
			filename: 'main.css'
		})
	],
	// 模块，配置处理规则
	module: {
		rules: [
            //eslint校验
            // {
            //     test: /\.js$/,
            //     use: {
            //         loader: 'eslint-loader',
            //         options: {
            //             enforce: 'pre' //声明此loader在其他loader之前执行
            //         }
            //     }
            // },
			//用babel-loader，需要把 es6 转换为 es5
			//@babel/preset-env用来转换 es6 语法
			{
				test: /\.js$/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: [
							'@babel/preset-env'
						],
						plugins: [
							//解析高级语法为es5低级语法，例如类class
							["@babel/plugin-proposal-decorators", { "legacy": true }],
							["@babel/plugin-proposal-class-properties", { "loose" : true }],
                            "@babel/plugin-transform-runtime"
						]
					}
				},
                exclude: /node_modules/
			},
			//css-loader 用于处理@import这种语法，解析路径
			//style-loader 用于将css文件插入HTML的head标签中
			//loader从右向左执行，从下到上执行
			{ 
				test: /\.css$/,
				use: [
					// {
					// 	loader: 'style-loader',
					// 	options: {
					// 		insert: 'head'//webpack5.0之后只有insert属性，值为 head 或者 body
					// 	}
					// }, 
					MiniCssExtractPlugin.loader,
					'css-loader',
					'postcss-loader'
				] ,
			},
			{
				test: /\.less$/, 
				use: [
					// {
					// 	loader: 'style-loader'
					// }, 
					MiniCssExtractPlugin.loader,
					'css-loader',
					'postcss-loader',
					'less-loader'
				] ,
			}
		]
	},
	// 优化项
	optimization: {
		minimizer: [
			//压缩CSS,如此配置之后，webpack不再压缩js，需要单独配置js的压缩
			new OptimizeCssAssetsWebpackPlugin({}),
			//压缩js
			new UglifyjsWebpackPlugin({
				
				sourceMap: true,
				cache: false,   //是否启用文件缓存，默认缓存在node_modules/.cache/uglifyjs-webpack-plugin.目录
				parallel: true,  //使用多进程并行运行来提高构建速度
				
				// test: /\.js(\?.*)?$/i,  //测试匹配文件,
				// include: /\/includes/, //包含哪些文件
				// excluce: /\/excludes/, //不包含哪些文件
				
				// //允许过滤哪些块应该被uglified（默认情况下，所有块都是uglified）。 
				// //返回true以uglify块，否则返回false。
				// chunkFilter: (chunk) => {
				// 	// `vendor` 模块不压缩
				// 	if (chunk.name === 'vendor') {
				// 		return false;
				// 	}
				// 	return true;
				// }
			}),

			
		],
	}
}